<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<dom-module id="shop-blog-detail">
    <template>
        <style>
            :host{
                
            }
            #cover{
                width:100%;
                height: 250px;
                background-color: #000;
                display: block;
            }
            .info{
                padding: 16px;
                background-color: #f5f5f5;
                font-size: 12px;
                display: flex;
                flex-direction: column;
            }
            .content{
                padding: 16px;
            }
            .title{font-weight: bold;font-size: 16px;}
            .time{color: #666;font-size: 12px;}
        </style>
        <app-route
        route="[[route]]"
        pattern="/:blogid"
        data="{{routeData}}"></app-route>
        <plugin-xhr id="xhr_get" url="{{app.apiHost}}/blog.get" response="{{blog}}" response-property="result"></plugin-xhr>
        <plugin-content-view visible="{{visible}}" contents="{{layout.blog_detail_top}}" width="[[pageWidth]]"></plugin-content-view>
        <template is="dom-if" if="{{blog.cover}}">
            <iron-image id="cover" preload fade sizing="contain" on-click="__viewImage" cover="{{blog.cover}}" src="{{blog.cover}}?imageView2/1/w/750"></iron-image>
        </template>
        <div class="info">
            <div class="title">{{blog.title}}</div>
            <div class="time">发布时间：{{_date(blog.createtime)}}</div>
        </div>
        <div class="content">
            <plugin-content-view on-custom-model-click="_customModelClick" contents="{{blog.contents}}"></plugin-content-view>
        </div>
        <plugin-content-view visible="{{visible}}" contents="{{layout.blog_detail_bottom}}" width="[[pageWidth]]"></plugin-content-view>
    </template>

    <script>
        class ShopBlogDetail extends PluginElement {
            static get is() {
                return 'shop-blog-detail';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    },
                    routeData:Object
                }
                
            }
            ready(){
                super.ready();
            }
            _visibleChanged(visible) {
                if(visible){
                    this.$.xhr_get.param("blog_id",this.routeData.blogid).callback(e=>{
                        let blog = e.detail.result;
                        wx.miniProgram.postMessage({data:{pageURL:window.location.href,share:{title:blog.title,imageUrl:blog.cover?blog.cover:undefined,sid:String(blog.id),url:window.location.href+"?app_id="+app.appId}}});
                    }).get();
                }
            }
            _customModelClick(e){
                if(e.detail.type=="product"){
                    let item = app.$.categoryData.getItem(e.detail.id);
                    app.route = {path:this.rootPath+"detail/"+item.category+"/"+item.name,prefix:""};
                }else if(e.detail.type=="blog"){
                    app.route = {path:this.rootPath+"blog/"+item.id,prefix:""};
                }else if(e.detail.type=="plugin"){
                    app.route = {path:this.rootPath+"plugin"+e.detail.link,prefix:""};
                }
                
            }
            __viewImage(e){
                this._viewImage(e.currentTarget.cover);
            }
        }
        

        customElements.define(ShopBlogDetail.is, ShopBlogDetail);

    </script>

</dom-module>
